<template>
	<form>
		账号：<input type="text" v-model="account"> <br><br>
		密码：<input type="password" v-model="password"> <br><br>
		性别：
			男<input type="radio" v-model="gender" value="male"> 
			女<input type="radio" v-model="gender" value="female"> 
			<br><br>
		爱好：
			学习<input type="checkbox" v-model="hobby" value="study">
			打台球<input type="checkbox" v-model="hobby" value="qiu">
			跑步<input type="checkbox" v-model="hobby" value="run">
			<br><br>
		所属校区：
			<select v-model="city">
				<option value="">请选择校区</option>
				<option value="beijing">北京</option>
				<option value="wuhu">武汉</option>
				<option value="xian">西安</option>
				<option value="shanghai">上海</option>
				<option value="shenzhen">深圳</option>
			</select>
			<br><br>
		其他信息：<textarea v-model="other"></textarea>
 		<br><br>
		<input type="checkbox" v-model="agree">
		阅读并接受 <a href="http://www.atguigu.com">《用户协议》</a>
		<br><br>
		<button @click.prevent="send">提交</button>
	</form>
</template>

<script>
	export default {
		name:'App',
		data() {
			return {
				account:'', //账户
				password:'', //密码
				gender:'', //性别
				hobby:[], //爱好
				city:'', //校区
				other:'', //其他信息
				agree:false
			}
		},
		methods:{
			send(){
				console.log(this.account)
			}
		}
	}
</script>
